<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>promise</title>
  </head>
  <body>
    <div></div>
    <script>
      //1、基本用法 Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。
      const promise = new Promise(function (resolve, reject) {
        //做一些异步操作
        // setTimeout(function () {
        //   console.log("操作成功")
        //   resolve("成功数据")
        // }, 2000)
        setTimeout(function () {
          console.log("操作失败")
          reject("失败数据")
        }, 2000)
      })
      //Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。
      //resolve函数的作用是，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
      //reject函数的作用是，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
      promise.then(
        function (data) {
          // success
          console.log(data)
        },
        function (error) {
          // failure
          console.log(error)
        }
      )
      //上面成功的操作我们执行了一个异步操作，也就是setTimeout，2秒后，输出“操作成功”，并且调用resolve方法
      // 注意！我们只是new了一个对象，并没有调用它，我们传进去的函数就已经执行了，这是需要注意的一个细节。所以我们用Promise的时候一般是包在一个函数中，在需要的时候去运行这个函数，
      function promiseFn() {
        const p = new Promise(function (resolve, reject) {
          //做一些异步操作
          setTimeout(function () {
            console.log("操作成功")
            resolve("成功数据")
          }, 2000)
        })
        return p
      }
      promiseFn()

      //2、catch的用法 Promise对象除了then方法，还有一个catch方法，它是做什么用的呢？其实它和then的第二个参数一样，用来指定reject的回调，
      function promiseFn2() {
        const p = new Promise(function (resolve, reject) {
          //做一些异步操作
          setTimeout(function () {
            console.log("操作失败2")
            reject("失败数据2")
          }, 2000)
        })
        return p
      }
      promiseFn2()
        .then(function (data) {
          console.log(data)
        })
        .catch(function (err) {
          console.log(err)
        })
      //3、如果异步操作抛出错误，状态就会变为rejected，就会调用catch()方法指定的回调函数，处理这个错误。另外，then()方法指定的回调函数，如果运行中抛出错误，也会被catch()方法捕获
      function promiseFn3() {
        const p = new Promise(function (resolve, reject) {
          //做一些异步操作
          // throw new Error("test")
          setTimeout(function () {
            resolve("成功数据")
          }, 2000)
        })
        return p
      }
      promiseFn3()
        .then(function (data) {
          console.log(data)
          throw new Error("test")
          //在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中
        })
        .catch(function (err) {
          console.log(err)
        })
    </script>
  </body>
</html>
